<template>
  <div class="Table">
    <m-table-tmpl
      @refresh="getData"
      :AdSearch.sync="AdSearch"
      :type.sync="tableType"
    >
      <template slot="search">
        <m-form :inline="true" :model="queryData" ref="queryForm">
          <m-form-item label="审批人" prop="user">
            <m-input v-model="queryData.user" placeholder="审批人"></m-input>
          </m-form-item>
          <m-form-item label="活动区域" prop="region" v-show="AdSearch">
            <el-select v-model="queryData.region" placeholder="活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </m-form-item>
          <m-form-item>
            <m-button type="primary" @click="getData">搜索</m-button>
            <m-button @click="resetForm('queryForm')">重置</m-button>
          </m-form-item>
        </m-form>
      </template>
      <template slot="opertaion">
        <m-button type="primary" icon="el-icon-plus" plain>新增</m-button>
        <m-button type="info" icon="el-icon-edit" plain>编辑</m-button>
        <m-button type="danger" icon="el-icon-delete" plain>删除</m-button>
        <m-button plain>其他</m-button>
      </template>
      <template slot="table">
        <m-table :data="tableData" @sort-change="sortChange">
          <m-table-column align="center" type="selection" width="50">
          </m-table-column>
          <m-table-column
            prop="date"
            label="序号"
            type="index"
            align="center"
            width="50"
            :index="(index) => tableIndex(index, page, pageSize)"
          ></m-table-column>
          <m-table-column prop="name" label="姓名">
            <template slot-scope="scope">
              <m-link @click="$m.to('Home')">{{ scope.row.name }}</m-link>
            </template>
          </m-table-column>
          <m-table-column prop="date" label="日期"> </m-table-column>
          <m-table-column prop="address" label="地址"> </m-table-column>
          <m-table-column prop="status" label="状态" width="160">
            <template slot-scope="scope">
              <div class="status-red" v-if="scope.row.status === 1">告警</div>
              <div class="status-yellow" v-if="scope.row.status === 2">
                预警
              </div>
              <div class="status-green" v-if="scope.row.status === 3">成功</div>
              <div class="status-gray" v-if="scope.row.status === 4">信息</div>
            </template>
          </m-table-column>
          <m-table-column
            prop="address"
            label="状态"
            width="160"
            align="center"
          >
            <template slot-scope="scope">
              <m-switch
                v-model="scope.row.MInput"
                active-text="开启"
                inactive-text="关闭"
              ></m-switch>
            </template>
          </m-table-column>
          <m-table-column
            prop="address"
            label="排序"
            width="160"
            align="center"
            sortable="custom"
          >
            <template slot-scope="scope">
              <m-input-number
                style="min-width: 100%"
                v-model="scope.row.sort"
                :min="0"
                :max="99999"
              ></m-input-number>
            </template>
          </m-table-column>
          <m-table-column
            prop="address"
            label="操作"
            align="center"
            width="200"
            fixed="right"
          >
            <template slot-scope="scope">
              <m-link icon="el-icon-edit">编辑</m-link>
              <m-link icon="el-icon-delete" @click="deleteConfirm(scope.row)"
                >删除</m-link
              >
              <i class="gap"></i>
              <m-dropdown>
                <m-link icon="el-icon-caret-bottom">更多</m-link>
                <m-dropdown-menu slot="dropdown">
                  <m-dropdown-item>黄金糕</m-dropdown-item>
                  <m-dropdown-item>狮子头</m-dropdown-item>
                  <m-dropdown-item>螺蛳粉</m-dropdown-item>
                </m-dropdown-menu>
              </m-dropdown>
            </template>
          </m-table-column>
        </m-table>
      </template>

      <template slot="pagination">
        <m-pagination
          :current-page="page"
          :page-size="pageSize"
          :page-sizes="pageSizes"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
        >
        </m-pagination>
      </template>
    </m-table-tmpl>
  </div>
</template>

<script>
export default {
  name: "DemoTable",
  data() {
    return {
      queryData: {
        user: "",
        region: "",
      },
      AdSearch: false,
      tableType: "card",
      tableData: [
        {
          date: "2016-05-04",
          name: "王小虎1",
          address: "上海市普陀区金沙江路 1517 弄",
          status: 1,
          sort: 1,
        },
        {
          date: "2016-05-01",
          name: "王小虎2",
          address: "上海市普陀区金沙江路 1519 弄",
          status: 2,
          sort: 2,
        },
        {
          date: "2016-05-03",
          name: "王小虎3",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 3,
          sort: 3,
        },
        {
          date: "2016-05-03",
          name: "王小虎4",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 4,
          sort: 4,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 1,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 2,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 3,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 4,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 3,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 2,
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
          status: 1,
        },
      ],
      page: 1,
      total: 0,
      pageSize: this.preferences.TablePageSize,
      pageSizes: this.preferences.TablePageSizes,
    };
  },
  components: {},
  mounted() {},
  methods: {
    // 获取数据
    getData() {
      console.log(1);
    },
    // 每页数量改变
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.page = 1;
      this.pageSize = val;
      this.getData();
    },
    // 页码变化
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
    },
    // 排序改变
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    // 确认删除
    deleteConfirm(data) {
      this.$m
        .confirm(`确定删除${data.name}吗？`)
        .then(() => {
          this.$m.message("删除成功", "success");
          this.getData();
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
@import "@/MUI/style/var.scss";
</style>
